import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Layout, UI, useThemeColors } from '@gaozh1024/rn-toolkit';

const PasswordInputTestScreen: React.FC = () => {
  const colors = useThemeColors();

  const styles = StyleSheet.create({
    section: { marginBottom: 20 },
    card: { borderRadius: 12, borderWidth: 1, borderColor: colors.border },
    row: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 12 },
    col: { gap: 12 },
    borderedRow: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 12, borderWidth: 1, borderColor: colors.border, padding: 8 },
  });

  // 受控示例状态
  const [pwd, setPwd] = useState<string>('');
  const [focusState, setFocusState] = useState<string>('未聚焦');

  return (
    <Layout.Page
      headerShown
      headerProps={{ title: 'PasswordInput 测试', backVisible: true }}
      padding={16}
      scrollable
      testID="PasswordInputTestScreen"
    >
      {/* 基础用法：受控/非受控 + placeholder（默认密文） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>基础用法</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>受控与非受控输入，包含占位符，支持显示/隐藏密码切换</UI.Text>
          <View style={styles.col}>
            <UI.PasswordInput
              value={pwd}
              onChangeText={setPwd}
              placeholder="请输入密码（受控）"
              testID="password-controlled"
            />
            <UI.PasswordInput
              defaultValue="initialSecret"
              placeholder="默认值（非受控）"
              testID="password-uncontrolled"
            />
          </View>
        </Layout.Card>
      </View>

      {/* 状态：disabled / error / helperText */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>状态与提示</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>error 切换边框色；helperText 显示提示信息</UI.Text>
          <View style={styles.row}>
            <UI.PasswordInput placeholder="禁用状态" disabled testID="password-disabled" />
            <UI.PasswordInput placeholder="错误状态" error helperText="密码不符合要求" testID="password-error-helper" />
          </View>
        </Layout.Card>
      </View>

      {/* 尺寸与变体：size + variant */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>尺寸与变体</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>size: xs/sm/md/lg/xl；variant: solid/outline/ghost</UI.Text>
          <View style={styles.row}>
            <UI.PasswordInput placeholder="XS + outline" size="xs" variant="outline" testID="password-size-xs-outline" />
            <UI.PasswordInput placeholder="SM + solid" size="sm" variant="solid" testID="password-size-sm-solid" />
            <UI.PasswordInput placeholder="MD + ghost" size="md" variant="ghost" testID="password-size-md-ghost" />
            <UI.PasswordInput placeholder="LG + outline" size="lg" variant="outline" testID="password-size-lg-outline" />
            <UI.PasswordInput placeholder="XL + solid" size="xl" variant="solid" testID="password-size-xl-solid" />
          </View>
        </Layout.Card>
      </View>

      {/* 宽度与布局：fullWidth / flex */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>宽度与布局</UI.Text>
          <View style={styles.col}>
            <UI.PasswordInput placeholder="fullWidth" fullWidth testID="password-fullwidth" />
            <View style={styles.borderedRow}>
              <UI.PasswordInput placeholder="flex=1" flex={1} testID="password-flex-1" />
              <UI.PasswordInput placeholder="flex=2" flex={2} testID="password-flex-2" />
            </View>
          </View>
        </Layout.Card>
      </View>

      {/* 文本样式：inputStyle */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>文本样式</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>inputStyle 自定义字体大小/颜色等</UI.Text>
          <View style={styles.row}>
            <UI.PasswordInput placeholder="大号文字" inputStyle={{ fontSize: 18 }} testID="password-style-fontsize-18" />
            <UI.PasswordInput placeholder="次要色文字" inputStyle={{ color: colors.textSecondary }} testID="password-style-textsecondary" />
          </View>
        </Layout.Card>
      </View>

      {/* 间距：SpacingProps */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>间距能力</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>m/p/mh/mv/ph/pv 等</UI.Text>
          <View style={styles.row}>
            <UI.PasswordInput placeholder="mt=8, mb=8" mt={8} mb={8} testID="password-spacing-mt-mb" />
            <UI.PasswordInput placeholder="ph=16, pv=8" ph={16} pv={8} testID="password-spacing-ph-pv" />
          </View>
        </Layout.Card>
      </View>

      {/* 盒模型：BoxProps（背景/边框/圆角/尺寸） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>盒模型样式</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>背景/边框/圆角/尺寸</UI.Text>
          <View style={styles.row}>
            <UI.PasswordInput
              placeholder="浅色背景 + 圆角"
              backgroundColor={colors.surface}
              borderRadius={12}
              testID="password-box-bg-radius"
            />
            <UI.PasswordInput
              placeholder="边框强调"
              borderWidth={1}
              borderColor={colors.border}
              width={240}
              testID="password-box-border-width"
            />
          </View>
        </Layout.Card>
      </View>

      {/* 键盘与交互：onFocus/onBlur */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>交互与焦点</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>监听焦点变化</UI.Text>
          <UI.Text variant="body1" color="textSecondary" mb={8}>焦点状态：{focusState}</UI.Text>
          <View style={styles.row}>
            <UI.PasswordInput
              placeholder="监听焦点"
              onFocus={() => setFocusState('已聚焦')}
              onBlur={() => setFocusState('未聚焦')}
              testID="password-focus-blur"
            />
          </View>
        </Layout.Card>
      </View>

      {/* 无障碍与测试 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>无障碍与测试</UI.Text>
          <View style={styles.row}>
            <UI.PasswordInput
              placeholder="带辅助文案"
              accessibilityLabel="密码输入框"
              accessibilityHint="输入登录密码，可切换显示/隐藏"
              testID="password-accessibility"
            />
          </View>
        </Layout.Card>
      </View>
    </Layout.Page>
  );
};

export default PasswordInputTestScreen;